<template>
  <div class="research g-wrap">
    <mt-header fixed title="科研成果信息">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <ul class="g-inputList searchlayer">
      <li>
        <div class="g-inputlist-title">论文题目</div>
        <div class="g-inputlist-content">
          <input v-model="payload.lwtm" placeholder="论文题目" maxlength="100" />
        </div>
      </li>
    </ul>
    <div class="btnBox">
      <mt-button @click="search" size="small" type="primary" style="width:40%">查询</mt-button>
      <mt-button @click="search('reset')" type="danger" size="small">重置</mt-button>
    </div>
    <!-- <div class="topBtn"><mt-button @click="popupVisible2 = true" size="small" type="primary">条件查询</mt-button></div> -->

    <ul class="list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="20">
      <li v-for="(item, index) in infoData" @click="goDetail(item)">
        <div class="con">
          <span class="key">{{ index + 1 }}</span
          >{{ item.lwtm }}
        </div>
        <span class="go link"></span>
      </li>
    </ul>
    <div v-if="infoData && total == 0" class="noData">
      暂无数据
    </div>
    <mt-popup position="right" class="mint-popup" v-model="popupVisible">
      <div class="popupCon">
        <mt-cell title="论文题目" :value="detailData.lwtm || '--'"></mt-cell>
        <mt-cell title="论文主题词" :value="detailData.lwztc || '--'"></mt-cell>
        <mt-cell title="刊物名称" :value="detailData.kwmc || '--'"></mt-cell>
        <mt-cell title="影响因子" :value="detailData.yxyz || '--'"></mt-cell>
        <mt-cell title="发表时间" :value="detailData.lwfbsj || '--'"></mt-cell>
        <mt-cell title="导师审核状态" :value="detailData.dsshztmc || '--'"></mt-cell>
        <mt-cell title="院系审核结果" :value="detailData.shztmc || '--'"></mt-cell>
      </div>
    </mt-popup>
    <div class="mint-popup-layerBtn" v-if="popupVisible">
      <mt-button @click="popupVisible = false" size="small" type="primary">关闭</mt-button>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import { lwxxList } from '@/api'
import { Indicator, Toast } from 'mint-ui'

export default {
  name: 'research',
  data() {
    return {
      loading: true,
      infoData: '',
      allLoaded: false,
      total: 0,
      currentPage: 1, //当前页面
      payload: { pageSize: 30, pageNum: 1, lwtm: '' },
      detailData: {},
      popupVisible: false
    }
  },
  methods: {
    getStudentClientInfo(type) {
      this.loading = true
      this.payload.pageNum = this.currentPage
      if (type === 'up') {
        this.payload.pageNum++
      }

      console.log(this.total, this.currentPage * this.payload.pageSize)

      if (type === 'up' && this.total <= this.currentPage * this.payload.pageSize) {
        Toast({
          message: '已加装全部数据',
          duration: 1500
        })
        return
      }

      Indicator.open()
      const param = this.payload
      request
        .post(lwxxList, param)
        .then((res) => {
          Indicator.close()
          const r = res.data
          this.total = (r.data && r.data.total) || 0
          this.infoData = this.infoData || []
          if (r && r.data && r.data.rows && r.data.rows.length > 0) {
            this.infoData = this.infoData.concat(r.data.rows)

            this.currentPage = this.payload.pageNum
            Toast({
              message: '第（' + this.currentPage + '）页',
              duration: 1500
            })
            this.loading = false
          }

          if ((r.data && r.data.rows && r.data.rows.length === 0) || !r.data) {
            Toast({
              message: '已加装全部数据',
              duration: 1500
            })
          }
        })
        .catch((err) => {})
    },
    goDetail(item) {
      this.detailData = item
      this.popupVisible = true
    },
    search(type) {
      this.pageNum = 1
      this.currentPage = 1
      this.infoData = ''
      if (type === 'reset') {
        this.payload = { ...this.payload, pageNum: 1, lwtm: '' }
      }
      this.getStudentClientInfo(type)
    },
    loadMore() {
      this.getStudentClientInfo('up')
    }
  },
  mounted() {
    this.getStudentClientInfo()
  }
}
</script>

<style scoped lang="less">
@import url('../../../assets/styles/base.less');
.research {
  .list {
    height: 100%;
    padding: (20 / @base);
    li {
      padding: (15 / @base);
      padding-right: (35 / @base);

      position: relative;
      line-height: (40 / @base);
      span.key {
        padding-right: (13 / @base);
      }
      span.go {
        position: absolute;
        display: block;
        width: (35 / @base);
        height: (50 / @base);
        top: (20 / @base);
        right: 0;
        background-image: url('../../../assets/goicon2.png');
        background-repeat: no-repeat;
        background-size: auto (30 / @base);
        background-position: 0 0;
      }
    }
    li:nth-child(2n + 1) {
      background: rgb(244, 244, 244);
    }
  }
  .topBtn {
    text-align: right;
    width: 100%;
    overflow: hidden;
    button {
      float: right;
      margin-right: (20 / @base);
      width: (300 / @base);
    }
  }
  .btnBox {
    text-align: center;
    button {
      width: 20%;
      margin: (30 / @base) auto;
    }
  }
  .searchlayer {
    padding: (10 / @base) (15 / @base);
  }
}
</style>
